<template>
  <div id="league-map">
    <el-amap class="amap-box" :vid="'amap-vue'" :center="center" zoom="12">
      <el-amap-marker
              v-for="college in colleges"
              :key="college.name"
              :position="college.location"
              :icon="college.is985 ? 'http://115.159.66.213:8000/985.png':'http://115.159.66.213:8000/211.png'"
              :extData="college.index"
      ></el-amap-marker>
      <el-amap-polygon
              v-for="league in leaguesPosition"
              :path="league.colleges"
              :key="league.league"
              :extData="league.league"
              :events="events"
      ></el-amap-polygon>
    </el-amap>
    <LeagueInfo :info="info" v-if="isShow"></LeagueInfo>
    <Reminder></Reminder>
  </div>
</template>

<script>
  import {colleges} from "../../assets/js/college";
  import {leagues, leaguesInfo} from "../../assets/js/leagues";
  import LeagueInfo from "./LeagueInfo";
  import Reminder from "../universities/Reminder";

  export default {
    name: "LeagueMap",
    data() {
      let self = this
      return {
        leagueMap: [],
        center: [],
        leaguesPosition: [],
        colleges: [],
        events: {
          click: (e) => {
            leaguesInfo.forEach(item => {
              if (item.name === e.target.w.extData) {
                self.info = item
                self.isShow = true
              }
            })
          }
        },
        info: leaguesInfo[0],
        isShow: false
      }
    },
    mounted() {
      if (this.$route.query.leagueMap) {
        let map = new Map()
        let duplicateArr = []
        let index = 0
        // [11]
        this.$route.query.leagueMap.forEach(item => {
          //["武汉七子"]
          this.leagueMap.push(leagues[item])
          this.leaguesPosition.push({
            index: index,
            league: leagues[item],
            colleges: []
          })
          //["武汉七子":0]
          map.set(leagues[item], index)
          index = index + 1
        })
        // console.log(map)
        colleges.forEach(college => {
          college.league.forEach(league => {
            if(map.get(league)!==undefined) {
              console.log(map.get(league))
              this.leaguesPosition[map.get(league)].colleges.push(college.location)
              if (duplicateArr.indexOf(college.name) === -1) {
                duplicateArr.push(college.name)
                this.colleges.push(college)
              }
            }
          })
        })

        this.center = this.leaguesPosition[0].colleges[0]
      }
    },
    components: {
      LeagueInfo,
      Reminder
    }
  }
</script>

<style scoped>
  #league-map {
    height: 100%;
  }
</style>